"use client"
import React, { useState } from 'react';
import "./globals.css";
import {
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme,Breadcrumb } from 'antd';
import { usePathname, useRouter } from "next/navigation";
import yztoken from '@/app/yztoken'

const { Header, Sider, Content } = Layout;

const pathToNameMap: Record<string, string> = {
  'zwy': '订单管理',
  'zwy/aaa': '订单列表',
  'zwy/bbb': '我的订单',
  'zwy/ccc': '下属订单',
  'zwy/ddd': '我的协作',
  'zwy/eee': '下属协作',
  'zwy/fff': '添加订单',
  'gpw': '审批流程',
  'gpw/aaa': '订单审批',
  'gpw/bbb': '回款审批',
  'gpw/ccc': '退款审批',
  'gpw/ddd': '报销审批',
  'gpw/eee': '请假审批',
  'wzf': '财务管理',
  'wzf/list': '回款计划',
  'wzf/list2': '汇款管理',
  'smy': '商机管理',
  'smy/list': '全部商机',
  'smy/list2': '我的商机',
  'cqq': '客户管理',
  'cqq/qq': '客户列表',
  'cqq/gonghai': '公海客户',
  'cqq/gonggong': '公共线索',
  'cqq/laji': '垃圾客户',
  'cqq/shaixuan': '客户筛选',
  'cqq/xiaoshou': '销售线索',
  'cqq/lianxi': '联系人列表',
  'cqq/genjin': '跟进记录',
  // Add more mappings as needed
};

function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {

  // 定义跳转
  

  const pathname = usePathname()
  const router = useRouter()
  const [collapsed, setCollapsed] = useState(false);
  const pathSegments = pathname.split('/').filter(Boolean);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const breadcrumbItems = pathSegments.map((segment, index) => {
    const isLast = index === pathSegments.length - 1;
    const path = '/' + pathSegments.slice(0, index + 1).join('/');
    const displayName = pathToNameMap[segment] || pathToNameMap[pathSegments.slice(0, index+1).join('/')] || 
    segment;
    
    return {
      title: isLast ? (
        <span style={{ fontWeight: 'bold' }}>{displayName}</span>
      ) : (
        <a 
          onClick={() => router.push(path)}
          style={{ cursor: 'pointer' }}
        >
          {displayName}
        </a>
      ),
    };
  });
  return (
    <html>
      <body>
        
    <Layout style={{height:'100vh'}}>
      
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={[pathname]}
          onSelect={(obj)=>{
            router.push(obj.key)
          }}
          items={[
            {
              key: '/zwy',
              icon: <UserOutlined />,
              label: '订单',
            },
            {
              key: '/gpw',
              icon: <VideoCameraOutlined />,
              label: '审批',
            },
            {
              key: '/wzf',
              icon: <UploadOutlined />,
              label: '财务',
            },
            {
              key: '/smy',
              icon: <UploadOutlined />,
              label: '商机',
            },
            {
              key: '/cqq',
              icon: <UploadOutlined />,
              label: '客户',
            },
          ]}
        />
      </Sider>
      <Layout>
      <Header style={{ padding: 0, background: colorBgContainer,display:'flex',justifyContent:'space-between' }}>
      <Breadcrumb
          style={{ 
            margin: '16px', 
            color: 'black',
            fontSize: '14px'
          }}
          items={[
            { 
              title: <a onClick={() => router.push('/')}>首页</a> 
            },
            ...breadcrumbItems,
          ]}
        />
          <Button 
          type='primary'
          style={{marginTop:'10px'}}
          onClick={()=>{
            localStorage.removeItem('token')
            router.push('/login')
          }}>退出登录</Button>
        </Header>
        
        <Content>
        
          {children}
        </Content>
      </Layout>
    </Layout>
      </body>
    </html>
  );
}

export default yztoken(RootLayout)
